<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>6.导航条</title>

<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

    <link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>

    <!-- 固定在顶端导航条 -->
    <style type="text/css">
        body {
            padding-top:70px;
        }
    </style>

    <!-- 固定在底部导航条 -->
    <!--<style type="text/css">
        body {
            padding-bottom:70px;
        }
    </style>-->
</head>

<body>

    <!--<div class="container">
        &lt;!&ndash;基本导航条&ndash;&gt;
    	<nav class="navbar navbar-default">
        	<div class="container-fluid">
           		<div class="navbar-header">
                	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                    	<span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                	</button>
                	<a href="#" class="navbar-brand">Bootstrap</a>                
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;
                
                <div class="collapse navbar-collapse" id="myCollapse1">
                	<ul class="nav navbar-nav">
                		<li class="active"><a href="#">菜单1</a></li>
                    	<li><a href="#">菜单2</a></li>
                        <li><a href="#">菜单3</a></li>
                    </ul>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/基本导航条&ndash;&gt;
    </div>-->

    <!--<div class="container">
        &lt;!&ndash;图片logo导航条&ndash;&gt;
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">
                        <img src="../img/logo.png" height="20"/>
                    </a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse" id="myCollapse1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li><a href="#">菜单3</a></li>
                    </ul>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/图片logo导航条&ndash;&gt;
    </div>-->

    <!--<div class="container">
        &lt;!&ndash;固定在顶端导航条&ndash;&gt;
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Bootstrap</a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse" id="myCollapse1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                菜单3
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">子菜单1</a></li>
                                <li><a href="#">子菜单2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/固定在顶端导航条&ndash;&gt;

        <script type="text/javascript">
            for (var i = 1;i <= 100;i ++) {
                document.write(i + '<br>');
            }
        </script>
    </div>-->

    <!--<div class="container">
        &lt;!&ndash;固定在底部导航条&ndash;&gt;
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container-fluid">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Bootstrap</a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse" id="myCollapse1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                菜单3
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">子菜单1</a></li>
                                <li><a href="#">子菜单2</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>&lt;!&ndash;/.collapse&ndash;&gt;

            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/固定在底部导航条&ndash;&gt;

        <script type="text/javascript">
            for (var i = 1;i <= 100;i ++) {
                document.write(i + '<br>');
            }
        </script>
    </div>-->

    <!--静止在顶端导航条-->
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Bootstrap</a>
            </div><!--/.navbar-header-->

            <div class="collapse navbar-collapse" id="myCollapse1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            菜单3
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">子菜单1</a></li>
                            <li><a href="#">子菜单2</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!--/.collapse-->
        </div><!--/.container-fluid-->
    </nav><!--/静止在顶端导航条-->

    <div class="container">
        <script type="text/javascript">
            for (var i = 1;i <= 100;i ++) {
                document.write(i + '<br>');
            }
        </script>
    </div>

    <!--<div class="container">
        &lt;!&ndash;反色导航条&ndash;&gt;
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Bootstrap</a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse pull-right" id="myCollapse1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">菜单1</a></li>
                        <li><a href="#">菜单2</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                菜单3
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">子菜单1</a></li>
                                <li><a href="#">子菜单2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/反色导航条&ndash;&gt;

        <script type="text/javascript">
            for (var i = 1;i <= 100;i ++) {
                document.write(i + '<br>');
            }
        </script>
    </div>-->


    <!--<div class="container">
        &lt;!&ndash;表单form导航条&ndash;&gt;
    	<nav class="navbar navbar-default">
        	<div class="container-fluid">
           		<div class="navbar-header">
                	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                    	<span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                	</button>
                	<a href="#" class="navbar-brand">Bootstrap</a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse" id="myCollapse1">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search"/>
                        </div>
                        <input type="submit" value="search" class="btn btn-primary"/>
                    </form>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/表单form导航条&ndash;&gt;
    </div>-->

    <!--<div class="container">
        &lt;!&ndash;按钮导航条&ndash;&gt;
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Bootstrap</a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse" id="myCollapse1">
                    <input type="submit" value="search" class="btn btn-primary navbar-btn"/>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/按钮导航条&ndash;&gt;
    </div>-->

    <!--<div class="container">
        &lt;!&ndash;文本导航条&ndash;&gt;
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Bootstrap</a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse" id="myCollapse1">
                    <p class="navbar-text">search content</p>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/文本导航条&ndash;&gt;
    </div>-->

    <!--<div class="container">
        &lt;!&ndash;非导航的链接&ndash;&gt;
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myCollapse1">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Bootstrap</a>
                </div>&lt;!&ndash;/.navbar-header&ndash;&gt;

                <div class="collapse navbar-collapse" id="myCollapse1">
                    <p class="navbar-text navbar-right"><a href="#" class="navbar-link">search content</a></p>
                </div>&lt;!&ndash;/.collapse&ndash;&gt;
            </div>&lt;!&ndash;/.container-fluid&ndash;&gt;
        </nav>&lt;!&ndash;/非导航的链接&ndash;&gt;
    </div>-->


</body>
</html>